﻿<!--
   	 作者：陈泽椿
   	 时间：2018-12-05
   	 描述：通用表格组件

  			
  	参数: 	chartData[]参数--------显示的数据行
  			itemsData[]------------规定的列名
  			haveEdit  ''--------------控制是否显示操作列（传入boolean类型）
			width  '' -----------控制列宽的长度（传入string类型）  
    		
-->


<template>
	<div>
		<el-table :data="chartData.slice((currentPage-1)*pagesize,currentPage*pagesize)" showOverflowTooltip  stripe border tooltip-effect="dark"  @selection-change="handleSelectionChange" @row-click="rowClick" ref="multipleTable">
			<el-table-column type="selection" width="50" fixed="left"> </el-table-column>
			<el-table-column :width="width" v-for="(item,index) in itemsData" :key="index" :prop="item.prop" :label="item.label"  show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" width="55" v-if="haveEdit"  fixed="right">
                <template slot-scope="scope">
                    <i class="el-icon-edit" @click="showEdit(scope.$index, scope.row)"></i>
                </template>
            </el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.currentPage" :page-sizes="[5,10, 20, 50, 100]" :page-size="this.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="chartData.length">
		</el-pagination>
	</div>	
</template>

<script>
	
	export default {
		props:{
			width:{
				type:String,
				default:'auto'
			},
			chartData:Array,
			itemsData:Array,
			haveEdit:{
				type:Boolean,
				default:true
			}
		},
		//props: ['chartData', 'itemsData'],
		data() {
			return {
				currentPage: 1,
				pagesize: 20,
				multipleTable:[]
//				testData:[
//					{name:'张三',sex:'男',age:19},
//					{name:'李四',sex:'男',age:19},
//					{name:'王五',sex:'男',age:19},
//					{name:'找刘',sex:'男',age:19},
//					{name:'张三',sex:'男',age:19},
//				],
//				items:[
//					{prop:'name',label:'姓名'},
//					{prop:'sex',label:'性别'},
//					{prop:'age',label:'年龄'},
//				]
			}
		},
		mounted: function() {
			//生命周期
			
		},
		computed: {
			//计算属性
			
		},
		methods: { //函数
			showEdit:function(index,row){
				this.$emit('onEdit',index, row);
			},
			handleSizeChange: function(size) {//改变页面展示多少条数据时调用的函数参数size 是你选择的数据 比如选5时  size就为5
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {//改变分页页码时调用的函数参数currentPage 是你选择的数据 比如选2时  则为第二页 currentPage 就是2
				this.currentPage = currentPage;
			},
			handleSelectionChange(val){
				this.multipleTable = val;
				this.$emit('selectionChange',val);
			},
			rowClick(row, event, column){
				this.toggleSelection(row);
				this.$emit('OnClick', row,event,column);
		    },
		    toggleSelection(rows) {
			    if (this.multipleTable.length>0) {
			        this.$refs.multipleTable.clearSelection();
			    } 
			    this.$refs.multipleTable.toggleRowSelection(rows);
		    },
		},
		created: function() {
			
		},
		update:function(){
			
		},
		watch: {
			chartData:function(nval,oval){
				this.currentPage = 1;
			}
		}

	}
</script>

<style>
</style>